<template>
    <div>
        <el-row>
            <el-col :span="12">
                <el-upload class="avatar-uploader" action="" :auto-upload="false" :show-file-list="false"
                    :on-change="handleCoverChange" name="img">
                    <el-button type="primary">导入数据</el-button>
                </el-upload>
            </el-col>
            <el-col :span="12">
                <el-button @click="download">下载数据</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="姓名" prop="__EMPTY"></el-table-column>
            <el-table-column label="开始时间" prop="__EMPTY_1"></el-table-column>
            <el-table-column label="结束时间" prop="__EMPTY_2"></el-table-column>
            <el-table-column label="时长" prop="__EMPTY_3"></el-table-column>
            <el-table-column label="附加时长" prop="__EMPTY_4"></el-table-column>
            <el-table-column label="系数" prop="__EMPTY_7"></el-table-column>
            <el-table-column label="总时长" prop="__EMPTY_5"></el-table-column>
            <el-table-column label="备注" prop="__EMPTY_6"></el-table-column>
        </el-table>
        <p>总时长：{{ total }}</p>
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="close">取消</el-button>
    </div>
</template>
<script>
import XLSX from 'xlsx'
import { durationRecord } from '@/api/task';
import moment from 'moment'

export default {
    props: ["id"],
    data() {
        return {
            tableData: []
        }
    },
    methods: {
        download() {
            const fileUrl = "template.xlsx"; // 文件的URL地址
            window.open(fileUrl);
        },
        handleCoverChange(file) {
            this.renderData(file.raw)
        },
        renderData(rawFile) {
            new Promise((resolve, reject) => {
                const reader = new FileReader()
                reader.onload = e => {
                    const data = e.target.result
                    const workbook = XLSX.read(data, { type: 'array', cellDates: true })
                    const firstSheetName = workbook.SheetNames[0]
                    const worksheet = workbook.Sheets[firstSheetName]
                    // const header = this.getHeaderRow(worksheet)
                    const results = XLSX.utils.sheet_to_json(worksheet)

                    let records = []
                    results.forEach(item => {

                        if (typeof item.__EMPTY_7 == 'number' && typeof Number(item.__EMPTY_7) == 'number') {
                            records.push(item)
                        }
                    })
                    this.tableData = records;
                    resolve()
                }
                reader.readAsArrayBuffer(rawFile)
            })
        },
        submit() {
            let durations = this.tableData.map(item => {
                if (moment(item['__EMPTY_1']).format('YYYY-MM-DD HH:mm:ss') == 'Invalid date') {
                    item['startTime'] = moment(item['__EMPTY_1'].replace("年", "-").replace("月", "-").replace("日", " ").replace("：", ":")).format('YYYY-MM-DD HH:mm:ss')
                    item['endTime'] = moment(item['__EMPTY_2'].replace("年", "-").replace("月", "-").replace("日", " ").replace("：", ":")).format('YYYY-MM-DD HH:mm:ss')
                } else {
                    item['startTime'] = moment(item['__EMPTY_1']).format('YYYY-MM-DD HH:mm:ss')
                    item['endTime'] = moment(item['__EMPTY_2']).format('YYYY-MM-DD HH:mm:ss')
                }
                return {
                    realName: item["__EMPTY"],
                    startTime: item["startTime"],
                    endTime: item["endTime"],
                    taskDuration: item["__EMPTY_3"],
                    extraDuration: item["__EMPTY_4"] ? item["__EMPTY_4"] : 0,
                    finalDuration: item["__EMPTY_5"],
                    remark: item["__EMPTY_6"] ? item["__EMPTY_6"] : "",
                    coefficient: item["__EMPTY_7"],
                }
            })

            let params = {
                taskId: this.id,
                durations: durations
            }
            durationRecord(params).then(res => {
                this.$message({
                    type: "warning",
                    message: "录入成功，等待审核"
                })
                this.$emit("done")
            })
        },
        close() {
            this.$emit("done")
        }
    },
    computed: {
        total() {
            return this.tableData.reduce((pre, next) => pre + next.__EMPTY_5, 0)
        }
    }
}
</script>